<!DOCTYPE html "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8"/>
        <title>Generic ArcGIS Service Viewer</title>
        <style type="text/css">
            #toc {
                width: 300px;
                height: 400px;
                border: 1px solid #000000;
            }
            
            #map {
                width: 700px;
                height: 400px;
                border: 1px solid #000000;
            }
            
            #loading {
                position: absolute;
                top: 40%;
                left: 45%;
                width: 200px;
                height: 20px;
                border: 1px solid #000000;
                background-color: yellow;
                visibility: hidden;
            }
            #title {
              font-size:20pt;
              font-weight:bold;
            }
            .ags-infowindow {
                font-size: 8pt;
                width: 240px;
                height: 180px;
                overflow: auto;
            }
            .ags-layername {
                font-size: 10pt;
                font-weight: bold;
                background-color: #aaaaff
            }
            .ags-fieldname {
                font-size: 8pt;
                background-color: #ccccff
            }
            .ags-fieldvalue {
                font-size: 8pt;
                background-color: #ffffff
            }
        </style>
        <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;key=ABQIAAAAjU0EJWnWPMv7oQ-jjS7dYxQGj0PqsCtxKvarsoS-iqLdqZSKfxRdmoPmGl7Y9335WLC36wIGYa6o5Q" type="text/javascript">
        </script>
        <script type="text/javascript">
            document.write('<script type="text/javascript" src="../src/arcgislink' + (document.location.search.indexOf('packed') > -1 ? '_packed' : '') + '.js"><' + '/script>');
        </script>
        <script type="text/javascript">
            var map;
            // optionally add some spatial reference
            // if not added the map will use flat SR which will be less 
            // accurate if switch to default google maps and loaded slower
            //NAD_1983_StatePlane_Massachusetts_Mainland_FIPS_2001_Feet
            ArcGISSpatialReferences.addSpatialReference(2249, 'PROJCS["NAD_1983_StatePlane_Massachusetts_Mainland_FIPS_2001_Feet",GEOGCS["GCS_North_American_1983",DATUM["D_North_American_1983",SPHEROID["GRS_1980",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Lambert_Conformal_Conic"],PARAMETER["False_Easting",656166.6666666665],PARAMETER["False_Northing",2460625.0],PARAMETER["Central_Meridian",-71.5],PARAMETER["Standard_Parallel_1",41.71666666666667],PARAMETER["Standard_Parallel_2",42.68333333333333],PARAMETER["Latitude_Of_Origin",41.0],UNIT["Foot_US",0.3048006096012192]]');
            //NAD_1983_StatePlane_North_Carolina_FIPS_3200_Feet
            ArcGISSpatialReferences.addSpatialReference(2264, 'PROJCS["NAD_1983_StatePlane_North_Carolina_FIPS_3200_Feet",GEOGCS["GCS_North_American_1983",DATUM["D_North_American_1983",SPHEROID["GRS_1980",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Lambert_Conformal_Conic"],PARAMETER["False_Easting",2000000.002616666],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",-79.0],PARAMETER["Standard_Parallel_1",34.33333333333334],PARAMETER["Standard_Parallel_2",36.16666666666666],PARAMETER["Latitude_Of_Origin",33.75],UNIT["Foot_US",0.3048006096012192]]');
            //NAD_1983_StatePlane_Ohio_North_FIPS_3401_Feet
            ArcGISSpatialReferences.addSpatialReference(3734, 'PROJCS["NAD_1983_StatePlane_Ohio_North_FIPS_3401_Feet",GEOGCS["GCS_North_American_1983",DATUM["D_North_American_1983",SPHEROID["GRS_1980",6378137.0,298.257222101]],PRIMEM["Greenwich",0.0],UNIT["Degree",0.0174532925199433]],PROJECTION["Lambert_Conformal_Conic"],PARAMETER["False_Easting",1968500.0],PARAMETER["False_Northing",0.0],PARAMETER["Central_Meridian",-82.5],PARAMETER["Standard_Parallel_1",40.43333333333333],PARAMETER["Standard_Parallel_2",41.7],PARAMETER["Latitude_Of_Origin",39.66666666666666],UNIT["Foot_US",0.3048006096012192]]');
            // Anything not added will be default to FlatSpatialReference

            function addMap(url){
              map.addArcGISMap(url, function(o){
                if (o instanceof ArcGISMapType) {
                  map.setMapType(o);
                  map.setBounds(o.getTileLayers()[0].getInitialBounds());
                } else if (o instanceof ArcGISMapOverlay) {
                  checkBounds(o);
                  o.setOpacity(document.getElementById("opacity").value);
                }
                updateTOC();
              });
            }
            
            function removeMap(url){
              var dynas = map.getArcGISOverlays();
              for (var i = 0; i < dynas.length; i++) {
                var service = dynas[i].getMapService();
                if (service.url == url) {
                  map.removeOverlay(dynas[i]);
                }
              }
              var types = map.getMapTypes();
              for (var i = 0; i < types.length; i++) {
                var mapType = types[i];
                if (mapType instanceof ArcGISMapType) {
                  var layers = mapType.getTileLayers();
                  for (var j = 0; j < layers.length; j++) {
                    var service = layers[j].getMapService();
                    if (service.url == url) {
                      map.removeMapType(mapType);
                    }
                  }
                }
              }
              updateTOC();
            }
            
            function updateTOC(){
              var html = '<b>Dynamic Map Services:</b><br/>';
              var dynas = map.getArcGISOverlays();
              for (var i = 0; i < dynas.length; i++) {
                var service = dynas[i].getMapService();
                html += '<input type="checkbox" id="Dyna' + service.url + '"' + (dynas[i].isHidden() ? '' : ' checked')
                 + ' onclick="toggleDyna(this)">' + service.name +' ('+getHost(service.url)+ ') '
                 + '<a href="javascript:removeMap(\''+service.url+'\');void(0);">remove</a><br/>';
              }
              document.getElementById('dynas').innerHTML = html;
              html = '<b>Tiled/Cached Map Services:</b><br/>';
              var types = map.getMapTypes();
              var ct = map.getCurrentMapType();
              for (var i = 0; i < types.length; i++) {
                var type = types[i];
                if (type instanceof ArcGISMapType){
                  var service = type.getTileLayers()[0].getMapService();
                  html += '<input type="radio" name="tiles" id="Tile' + service.url + '"' + (type==ct ? ' checked' : '')
                   + ' onclick="toggleTile(this)">' + service.name + ' ('+getHost(service.url)+ ') '
               + '<a href="javascript:removeMap(\''+service.url+'\');void(0);">remove</a><br/>';
                }
              }
              document.getElementById('tiled').innerHTML = html;
              function getHost(url){
                var s = url.indexOf('://')+3;
                var end = url.indexOf('/',s);
                return url.substring(s,end);
              }
            }
            
            function toggleDyna(chk){
              var dynas = map.getArcGISOverlays();
              for (var i = 0; i < dynas.length; i++) {
                var service = dynas[i].getMapService();
                if ('Dyna'+service.url == chk.id) {
                  if (chk.checked) {
                    dynas[i].show();
                    checkBounds(dynas[i]);
                  } else {
                    dynas[i].hide();
                  }
                }
              }
              
            }
            function toggleTile(rad){
              var types = map.getMapTypes();
              for (var i = 0; i < types.length; i++) {
                if (types[i] instanceof ArcGISMapType) {
                  var service = types[i].getTileLayers()[0].getMapService();
                  if ('Tile' + service.url == rad.id) {
                    if (rad.checked) {
                      map.setMapType(types[i]);
                    } else {
                      map.setMapType(types[0]);
                    }
                    checkBounds(types[i]);
                  }
                }
              }
             }
             function checkBounds(o){
               if (o instanceof ArcGISMapType) {
                   if (!o.getTileLayers()[0].getFullBounds().intersects(map.getBounds())) {
                     map.setBounds(o.getTileLayers()[0].getInitialBounds());
                   }
               }else if (o instanceof ArcGISMapOverlay){
                 if (!o.getFullBounds().intersects(map.getBounds())){
                      map.setBounds(o.getInitialBounds());
                 }
               }
             }
             
             //copy from http://gmaps-samples.googlecode.com/svn/trunk/versionchecker.html?v=2.86
             function getURLParam(name) {
               var regexS = "[\\?&]" + name + "=([^&#]*)";
               var regex = new RegExp(regexS);
               var results = regex.exec(window.location.href);
               return (results === null ? "" : results[1]);
             }
             
             function init() {
               map = new GMap2(document.getElementById('map'), {
                 backgroundColor: '#ffffff',
                 draggableCursor: 'default'
               });
               map.setCenter(new GLatLng(40, -95), 4);
               map.addControl(new GMapTypeControl());
               map.addControl(new GLargeMapControl());
               map.addControl(new GScaleControl());
               map.enableDoubleClickZoom();
               map.enableContinuousZoom();
               map.enableScrollWheelZoom();
               map.enableArcGISClick();
               var url=getURLParam('url');
               if (url){
                 addMap(url);
               }
               
               GEvent.addListener(map, 'maptypechanged', function() {
                 var tp = map.getCurrentMapType();
                 map.closeInfoWindow();
                 checkBounds(tp);
                 updateTOC();
               });
               GEvent.addListener(ArcGISUtil, 'jsonpstart', function() {
                 document.getElementById('loading').style.visibility = 'visible';
               });
               GEvent.addListener(ArcGISUtil, 'jsonpend', function() {
                 document.getElementById('loading').style.visibility = 'hidden';
               });
             }
        </script>
    </head>
    <body onload="init()">
        <div><span id='title'>Generic ArcGIS Server Map Service Viewer</span>   <span>   <a href='../docs/examples.html'>More examples</a> | Use
       <a href='?packed'>Packed </a> | 
       <a href='?'> Unpacked</a> Version of the script.</span> </div>
          
          <div>
            Enter URL of any ArcGIS server map service that is accessible (including intranet) and click 'Add', 
            and you can click on <b>anywhere</b> on the map to get data behind.(identify tool) 
            <br/>
            <input type='text' id='url' size='110' value='http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/Portland_ESRI_LandBase_AGO/MapServer'/>
            <input type='button' value='Add' onclick='addMap(document.getElementById("url").value)'/>
            <span>Dyna Opacity(0-1):<input id='opacity' size=4 type='text' value="0.5"></span>
           
            <br/>If you plan to use any services in your mashup, 
              <b> please check with the term of use from the service provider.</b> 
      </div>
        <div >
        <table>
            <tr>
                <td>
                    <div id="toc">
                        <div id='dynas'>
                        </div>
                        <div id='tiled'>
                        </div>
                    </div>
                </td>
                <td>
                    <div id="map">
                    </div>
                </td>
            </tr>
        </table>
        </div>
        <div>
          <br/>You can also pass the 'url' parameter to this page to add a service directly.
          The following is a list of sample services from ESRI sample server:
          <ul>
            <li>
              Portland Landbase in WGS84: 
              <a href="javascript:addMap('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/Portland_ESRI_LandBase_AGO/MapServer');void(0)">Add</a>
             </li>
            <li>
              Portland Neighborhoods in Web Mercator: 
              <a href="javascript:addMap('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Portland/Portland_ESRI_Neighborhoods_AGO/MapServer');void(0)">Add</a>
             </li>
            <li>
              USA Census: 
              <a href="javascript:addMap('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Census_USA/MapServer');void(0)">Add</a>
             </li>
            <li>
              World Population: 
              <a href="javascript:addMap('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Demographics/ESRI_Population_World/MapServer');void(0)">Add</a>
             </li>
            <li>
              Kansas OilGasFields: 
              <a href="javascript:addMap('http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Petroleum/KGS_OilGasFields_Kansas/MapServer');void(0)">Add</a>
             </li>
          </ul>
          The following is a collection of live services, some of those are collected from ESRI's
            <a href='http://www.esri.com/software/arcgis/arcgisserver/live_user_sites.html'>
              Live User Site List</a>. <br/>
              If you are the owner of one of those links and would like to remove your link from this list, 
              or you would like to add your new service in this list to support this project,
               please <a href='mailto:nianwei@gmail.com'>let me know</a>. <br/>
               <ul>
             <li>
              Boston Planimetrics: 
              <a href="javascript:addMap('http://140.241.251.197/ArcGIS/rest/services/maps/Planimetrics_Base_tiled/MapServer');void(0)">Add</a>
              | <a href='http://gis.cityofboston.gov/SolarBoston/'>Original Site</a>
             </li>
              <li>
              Boston Terrain:
              <a href="javascript:addMap('http://140.241.251.197/ArcGIS/rest/services/maps/Terrain_Base_tiled/MapServer');void(0)">Add</a>
              | <a href='http://gis.cityofboston.gov/SolarBoston/'>Original Site</a>
             </li>
              <li>
              Flagler County (FL) Property Appraiser: 
              <a href="javascript:addMap('http://ags.roktech.net/ArcGIS/rest/services/FlaglerDefault/MapServer');void(0)">Add</a>
              | <a href='http://maps.roktech.net/GoMaps93/'>Original Site</a>
             </li>
              <li>
              Charlotte City Map: 
              <a href="javascript:addMap('http://maps.ci.charlotte.nc.us/ArcGIS/rest/services/GET/BaseMap/MapServer');void(0)">Add</a>
             </li>   
             </ul>
        </div>
        <div id='loading'>
            Working.....
        </div>
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-3946449-5");
pageTracker._trackPageview();
</script>
    </body>
</html>
